<template>
    <div class="main-container preview-contain">
        <p @click="popupVisible = true">ceshi</p>
        <mt-popup
                v-model="popupVisible"
                popup-transition="popup-fade">
            <pr-row class="header-control">
                <pr-col hor="left" span="1"></pr-col>
                <pr-col hor="right" span="5">
                    <icon-svg iconClass="guanbi"></icon-svg>
                    <icon-svg iconClass="fangda"></icon-svg>
                    <icon-svg iconClass="suoxiao"></icon-svg>
                    <icon-svg iconClass="quanping"></icon-svg>
                    <icon-svg iconClass="tuichuquanping"></icon-svg>
                </pr-col>
            </pr-row>
            <swiperExtend>
                <div class="swiper-slide" v-for="(item, index) in imgList" :key="item">
                    <pic :url="item.src"></pic>
                </div>
            </swiperExtend>
        </mt-popup>
    </div>
</template>
<script>
    require('swiper');
    import swiperExtend from 'shared/components/swiper_extend'
    export default{
        props: {
            imgList: {
                type: Array,
                default: function () {
                    return [
                        {src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4271053251,2424464488&fm=117&gp=0.jpg'},
                        {src: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4195805644,827754888&fm=117&gp=0.jpg'},
                        {src: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=965330022,2254577156&fm=117&gp=0.jpg'}
                    ]
                }
            }
        },
        data(){
            return{
                popupVisible: false
            }
        },
        components:{
            swiperExtend
        },
        computed:{

        },
        methods:{

        },
        created(){

        },
        mounted(){
            let swiper = new Swiper('.add-swiper-container');
        }
    }
</script>
<style lang="less" scoped>
    @import "./../../assets/css/variable_gather";
    .header-control{
        .absolute(0,0,auto,0,3000);
    }
    .preview-contain{
        width: 100%;
    }
</style>
<style lang="less">
    .preview-contain .mint-popup{
        width: 100%;
    }
</style>
